<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="list" style="display:flex ; text-align:center;">
    </div>
     <button>上一页</button>
     <button>下一页</button>
</body>
</html>
<script src="./promise封装函数.js"></script>
<script>
    var page=1
    //获取 input标签
    let btns=document.querySelectorAll('button')
     //进行判断,当页数=0时，默认显示第一页的十个表情
     if(page=1){
            ajax('get','https://yantianfeng.com/api/emotion',{page:1,count:10}).then((data)=>{
                 //进行渲染
                 var str = data.emotions.map((item, index) => {
                        return `<div> <img src="${item.url}" /> <div> ${item.title} </div> </div>`
                    }).join('')
                 document.querySelector('.list').innerHTML = str;
            })
        }
    //绑定点击事件
    btns[0].onclick=function(){
        //进行判断,当页数大于一时，点击下一页，渲染下一页
        if(page>1){
            ajax('get','https://yantianfeng.com/api/emotion',{page:--page,count:10}).then((data)=>{
                 //进行渲染
                 var str = data.emotions.map((item, index) => {
                        return `<div> <img src="${item.url}" /> <div> ${item.title} </div> </div>`
                    }).join('')
                 document.querySelector('.list').innerHTML = str;
            })
        }
    }
    btns[1].onclick=function(){
        //进行判断,当页数小于4时，点击上一页，渲染上一页
        if(page<4){
            ajax('get','https://yantianfeng.com/api/emotion',{page:++page,count:10}).then((data)=>{
                 //进行渲染
                 var str = data.emotions.map((item, index) => {
                        return `<div> <img src="${item.url}" /> <div> ${item.title} </div> </div>`
                    }).join('')
                 document.querySelector('.list').innerHTML = str;
            })
        }
    }
</script>